<template>
    <el-dialog title="修改书籍信息" :visible="editVisible" :show-close="false">
        <el-form :model="form">
            <el-form-item label="书籍名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="作者" :label-width="formLabelWidth">
                <el-input v-model="form.author" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeDialog()">取 消</el-button>
            <el-button type="primary" @click="toEdit()">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import axios from 'axios'

export default {
    name: 'editDialog',
    props: ['editVisible', 'editData'],
    data() {
        return {
            show: false,
            form: {
                id: '',
                name: '',
                author: ''
            },
            formLabelWidth: '120px'
        }
    },
    watch: {
        editData(val) {
            this.form = {
                id: val.id,
                name: val.name,
                author: val.author,
            }
        }
    },
    methods: {
        // 调用修改接口
        toEdit() {
            axios.post('http://localhost:3300/update', this.form).then((res) => {
                if (res.status === 200) {
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.$emit('editSuccessed')
                }
            })
        },
        closeDialog() {
            // 向父组件传递信息 关系dialog
            this.$emit('closeDialog')
        }
    }
}
</script>

<style>

</style>